<ng-container *ngIf="!loading; else isLoading">
  <cd-alert-panel *ngIf="error"
                  type="error"
                  i18n>Failed to retrieve SMART data.</cd-alert-panel>
  <cd-alert-panel *ngIf="incompatible"
                  type="warning"
                  i18n>The data received has the JSON format version 2.x and is currently incompatible with the
    dashboard.</cd-alert-panel>

  <ng-container *ngIf="!error && !incompatible">
    <cd-alert-panel *ngIf="!(data | keyvalue).length"
                    type="info"
                    i18n>No SMART data available.</cd-alert-panel>

    <ng-container *ngFor="let device of data | keyvalue">
      <ul ngbNav
          #nav="ngbNav"
          class="nav-tabs">
        <li ngbNavItem>
          <a ngbNavLink
             i18n>{{ device.value.device }} ({{ device.value.identifier }})</a>
          <ng-template ngbNavContent>

            <ng-container *ngIf="device.value.error; else noError">
              <cd-alert-panel id="alert-error"
                              type="warning">{{ device.value.userMessage }}</cd-alert-panel>
            </ng-container>

            <ng-template #noError>
              <!-- HDD/NVMe self test -->
              <ng-container *ngIf="device.value.info.smart_status.passed; else selfTestFailed">
                <cd-alert-panel id="alert-self-test-passed"
                                size="slim"
                                type="info"
                                i18n-title
                                title="SMART overall-health self-assessment test result"
                                i18n>passed</cd-alert-panel>
              </ng-container>
              <ng-template #selfTestFailed>
                <cd-alert-panel id="alert-self-test-failed"
                                size="slim"
                                type="warning"
                                i18n-title
                                title="SMART overall-health self-assessment test result"
                                i18n>failed</cd-alert-panel>
              </ng-template>
            </ng-template>

            <ul ngbNav
                #innerNav="ngbNav"
                class="nav-tabs">
              <li ngbNavItem>
                <a ngbNavLink
                   i18n>Device Information</a>
                <ng-template ngbNavContent>
                  <cd-table-key-value [renderObjects]="true"
                                      [data]="device.value.info"></cd-table-key-value>
                </ng-template>
              </li>
              <li ngbNavItem>
                <a ngbNavLink
                   i18n>SMART</a>
                <ng-template ngbNavContent>
                  <cd-table *ngIf="device.value.smart.attributes"
                            [data]="device.value.smart.attributes.table"
                            updateSelectionOnRefresh="never"
                            [columns]="smartDataColumns"></cd-table>
                  <cd-table-key-value *ngIf="device.value.smart.nvmeData"
                                      [renderObjects]="true"
                                      [data]="device.value.smart.nvmeData"
                                      updateSelectionOnRefresh="never"></cd-table-key-value>
                  <cd-alert-panel *ngIf="!device.value.smart.attributes && !device.value.smart.nvmeData"
                                  type="info"
                                  i18n>No SMART data available for this device.</cd-alert-panel>
                </ng-template>
              </li>
            </ul>

            <div [ngbNavOutlet]="innerNav"></div>
          </ng-template>
        </li>
      </ul>

      <div [ngbNavOutlet]="nav"></div>
    </ng-container>
  </ng-container>
</ng-container>
<ng-template #isLoading>
  <cd-loading-panel i18n>SMART data is loading.</cd-loading-panel>
</ng-template>
